<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>结果：<span id="result"></span></div>
    <button id="submit">发送请求</button>
    <script>
        const result = document.querySelector('#result')
        const submit = document.querySelector('#submit')
        submit.onclick = () => {
            // 生成 XMLHTTPRequest 实例对象
            const xhr = new XMLHttpRequest()
            // 准备好发请求
            xhr.open('GET', 'http://192.168.22.24:4000/ping')
            // 发送
            xhr.send()
            result.innerHTML = '请求发送中...'
            // 监听
            // 闭包：闭包会记住特定时刻，函数内部数据以及外部数据的引用
            // readyState: 0 new, 1 open, 2 send, 3 传输, 4 完成
            const { readyState, status } = xhr
            xhr.onreadystatechange = () => {
                console.log(xhr.readyState, xhr.status, readyState, status)
                // if (xhr.readyState === 4 && xhr.status === 200) {
                //     // 请求成功
                //     console.log(xhr.responseText)
                //     result.innerHTML = xhr.responseText
                // }
            }
        }
    </script>
</body>

</html>